<template>
	<view class="" style="width: 100vw;height: 100vh">
		<view class="" :style="{'background':kbackgroundColor2}" style="min-height: 100vh">
			<hx-navbar title="我的钱包" :back="true" :fixed="false" :color="knavTitleColor"
				:style="{backgroun:kbackgroundColor2}" barPlaceholder="hidden" transparent="auto"></hx-navbar>
			<view class="content">
				<view class="cont_back">
					<image class="image" v-if="ktheme != 'purple'" src="@/static/user/wallet/backg_black.png"
						mode="widthFix"></image>
					<image class="image" v-else src="@/static/user/wallet/back_purple.png" mode="widthFix"></image>
					<view class="cont_back_mess">
						<view class="mess_balance" :style="{color:knavTitleColor}" @click="isopenCliack">
							钱包余额（元）
							<view class="" v-if="ktheme != 'purple'">
								<image v-if="isopen" src="@/static/user/wallet/yey.png" class="yeyimg" mode="widthFix">
								</image>
								<image v-if="!isopen" src="@/static/user/wallet/cyey.png" class="yeyimg"
									mode="widthFix">
								</image>
							</view>
							<view class="" v-else>
								<image v-if="isopen" src="@/static/user/wallet/yey2.png" class="yeyimg" mode="widthFix">
								</image>
								<image v-if="!isopen" src="@/static/user/wallet/cyey2.png" class="yeyimg"
									mode="widthFix">
								</image>
							</view>
						</view>
						<view class="balance_val" :style="{color:knavTitleColor}">
							{{balanceVal}}
						</view>
						<view class="bal_btntk">

							<view class="btntk" @click="fullClick(1)" :style="{background:kbuttonBgColor}">
								充值
							</view>
							<view class="btntk" @click="fullClick(2)"
								:style="[{'border': (ktheme != 'purple' ? '1px solid #D2D2D2':' 1px solid #8c8c8c')},{'background': (ktheme != 'purple' ? '#434343':'#fff')},{'color': (ktheme != 'purple' ? '#ffffff':'#000')}]">
								提现
							</view>
						</view>
					</view>
				</view>
				<view class="cont_mess" style="text-align: center;"
					:style="[{'background': (ktheme != 'purple' ? ' #323232':' #ffffff')},{'color': (ktheme != 'purple' ? ' #ffffff':' #000')}]">
					<view class="mess_list" v-for="(item,index) in messList" @click="messListClick(index)" :key="index">
						<image class="m-img" v-if="ktheme == 'purple' " :src="item.image" mode=""></image>
						<image class="m-img" v-if="ktheme !== 'purple' " :src="item.bimage" mode=""></image>
						<view class="">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="cont_mess">
					<view class="" :class="[{'detail_mess':ktheme =='black'},{'detail_mess2':ktheme =='purple'}]">余额交易明细
					</view>
					<!-- <view @click="payDetail()" style="display: flex;align-items: center;"
						:style="{'color': (ktheme != 'purple' ? '#D2D2D2':'#000')}"> 全部
						<image src="@/static/user/wallet/rjiantou.png" class="rimg" mode="widthFix" />
					</view> -->
				</view>
				<view class="cont_mess" v-for="(item,index) in list" :key="index" @click="detailsClick(item)"
					:style="{'background': (ktheme != 'purple' ? ' #323232':'#ffffff')}">
					 <!-- 1->充值 2->提现  3-> 支出  4->收入 -->
					<view class="type_img" style="background: #434343;" v-if="ktheme != 'purple'">
						<image class="t_img" v-if="item.changeType==1" src="@/static/user/wallet/pay.png" mode="">
						</image>
						<image class="t_img" v-if="item.changeType==2" src="@/static/user/wallet/pay.png" mode="">
						</image>
						<image class="t_img" v-if="item.changeType==3" src="@/static/user/wallet/more.png" mode="">
						</image>
						<image class="t_img" v-if="item.changeType==4" src="@/static/user/wallet/send.png" mode="">
						</image>
					</view>
					<view class="type_img" style="background:#EEEEEE" v-if="ktheme != 'black'">
						<image class="t_img" v-if="item.changeType==1" src="@/static/user/wallet/pay_black.png" mode="">
						</image>
						<image class="t_img" v-if="item.changeType==2" src="@/static/user/wallet/pay_black.png" mode="">
						</image>
						<image class="t_img" v-if="item.changeType==3" src="@/static/user/wallet/more_black.png"
							mode=""></image>
						<image class="t_img" v-if="item.changeType==4" src="@/static/user/wallet/send_black.png"
							mode=""></image> 
					</view>
					<view class="" style="width:55%;">
						<view class="name_detail" :style="{'color': (ktheme != 'purple' ? ' #dfdfdf':'#000000')}">
							{{item.changeReason}}
						</view>
						<view class="d_mess" :style="{'color': (ktheme != 'purple' ? ' #b9b9b9':' #000000')}">
							<!-- 1->充值 2->提现 3->支出 4->收入 -->
							<!-- 1->充值 2->提现失败 3->提现成功4->支出 5->收入 -->
							<!--  1->处理中 2->成功  3->失败 -->
							<!-- 		<text v-if="item.changeType==1">处理中</text>
							<text v-if="item.changeType==2">成功</text>
							<text v-if="item.changeType==3">失败</text> -->
							<!-- <text>{{item.changeReason}}</text> -->
						</view>
						<view class="d_mess" :style="{'color': (ktheme != 'purple' ? ' #b9b9b9':' #000000')}">
							{{filterTime(item.createTime)}}
						</view>
					</view>
					<!-- 提现申请 - -->
					<!-- 充值申请 + -->
					<view class="money" style="width: 27%;text-align: right;" :style="{color:kselectColorSize}">
						<!-- 	<text v-if="item.changeReason=='充值成功' ||item.changeReason=='提现失败' ">+</text>
				<text v-if="item.changeReason=='提现申请'">-</text> -->
						<text v-if="item.changeType==1 || item.changeType==4">+</text>
						<text v-if="item.changeType==2 || item.changeType==3">-</text>
						<text v-if="item.changeType==3 || item.changeType==4">	{{item.changeAmount}}</text>
						<text v-else>{{item.changeAmount}}</text>
					</view>
				</view>

			</view>

			<uni-popup ref="bindingDialog" type="center" :maskBackgroundColor="'rgba(0,0,0,0.5)'" :isMaskClick="false">
				<view class="store-view store-border-all tips-padding"
					:style="{'background':kbackgroundColor,color:knormalColor}"
					:class="[{'alert-border-black alert-border-shadow-black':ktheme =='black'},{'alert-border-purple':ktheme =='purple'}]">
					<text class="popup-title"></text>
					<text class="popup-subtitle">{{tiMesee}}</text>
					<view class="tips-bottom">
						<view class="tips-button"
							:class="[{'tips-cancel-bg-black':ktheme =='black'},{'tips-cancel-bg-white':ktheme =='purple'}]"
							@click="bindingClose()">放弃充值</view>
						<view class="tips-button" :style="{background:kbuttonBgColor}" @click="bindingCheck()">认证企业账户
						</view>
					</view>
				</view>
			</uni-popup>
			<!-- 充值 -->
			<uni-popup ref="ticfPopup" type="center" :maskBackgroundColor="'rgba(0,0,0,0.5)'">
				<view class="store-view store-border-all tips-padding"
					:style="{'background':kbackgroundColor,color:knormalColor}"
					:class="[{'alert-border-black':ktheme =='black'},{'alert-border-purple':ktheme =='purple'}]">
					<text class="popup-title">提交</text>
					<text class="popup-subtitle">
						{{czmess}}
					</text>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				tiMesee: "充值业务暂时只对企业账户开放，如需充值， 请选择其他钱包。", //充值提示带跳转
				czmess: "", //提示
				isopen: true,
				balanceVal: "",
				bNum: '',
				page: 1,
				limit: 10,
				messList: [{
					id: 1,
					name: '企业账户认证',
					image: '../../../static/user/wallet/enterprise_purple.png',
					bimage: '../../../static/user/wallet/enterprise_black.png'
				}, {
					id: 2,
					name: '账单',
					image: '../../../static/user/wallet/bill-purple.png',
					bimage: '../../../static/user/wallet/bill-black.png'
				}, {
					id: 3,
					name: '银行卡',
					image: '../../../static/user/wallet/bank_purple.png',
					bimage: '../../../static/user/wallet/bank_black.png'
				}, {
					id: 4,
					name: '支付管理',
					image: '../../../static/user/wallet/pay_purple.png',
					bimage: '../../../static/user/wallet/pay_black1.png'
				}],
				list: [{
					id: 1,
					name: '余额交易明细',
					cg: "支付成功",
					date: '2024-05-13 14：45：12',
					type: 1,
					money: '+1000'
				}, {
					id: 1,
					name: '余额交易明细',
					cg: "提现",
					date: '2024-05-13 14：45：12',
					type: 2,
					money: '+1000'
				}],
				ifVerify: false,
				page: 1,
				limit: 10,
				list: [],
				current: '',
				hasNextPage: true,
			}
		},
		onPullDownRefresh() {
			setTimeout(function() {

				uni.stopPullDownRefresh()
			}, 1000)
			this.page=1
			this.getlist()
			this.getDetailList()
		},
		onReachBottom() {
			if (this.hasNextPage && !this.isLoading) {
				this.page = this.page + 1;
				this.getDetailList();
			}
		},
		onLoad() {
			this.getlist()
			this.getDetailList()
			this.getPurseEnte()
		},
		onShow() {
			this.getlist()
			this.getPurseEnte()
		},
		methods: {
			//验证企业
			getPurseEnte() {
				this.$api.getPurseEnte(res => {
					if (res.status) {
						this.ifVerify =res.data
					} else {
						this.$common.errorToShow(res.message)
					}
				})
			},
			messListClick(index) {
				console.log("index--", index);
				if (index == 0) {
					uni.navigateTo({
						url: '/pages/user/wallet/mine-auth'
					})
				} else if (index == 1) {
					uni.navigateTo({
						url: '/pages/user/wallet_system/pay_detail'
					})
				} else if (index == 2) {
					uni.navigateTo({
						url: '/pages/user/wallet/mine-bank-list'
					})
				} else if (index == 3) {
					uni.navigateTo({
						url: '/pages/user/settings/pay_pass/pay_pass'
					})
				}
			},
			filterTime(val) {
				return this.$common.filterTime(val);
			},
			detailsClick(item) {
				var list= encodeURIComponent(JSON.stringify(item));
				uni.navigateTo({
					url: '/pages/user/wallet/draw-cash-result?id=' + item.id + '&type=2'+'&list='+list
				})
			},
			getDetailList() {
				this.hasNextPage = true;
				//明细
				this.$api.purseChangeDetailList(this.page, val => {
					if (val.status) {
						if (this.page == 1) {
							this.list = [];
							this.list = val.data.list;
						} else {
							this.list = this.list.concat(val.data.list)
						}
						this.hasNextPage = val.data.list.length >= this.limit;
					} else {
						this.$common.errorToShow(val.message)
					}

				})
			},
			getlist() {
				//余额显示
				this.$api.pursedetailId(res => {
					console.log("res--",res);
					if (res.status) {
						this.bNum = res.data.balance
						this.balanceVal = res.data.balance
					} else {
						this.$common.errorToShow(res.message)
					}

				})

			},
			isopenCliack() {
				this.isopen = !this.isopen
				if (!this.isopen) {
					this.balanceVal = '******'
				} else {
					this.balanceVal = this.bNum
				}
			},
			bindingClose() {
				this.$refs.bindingDialog.close()
			},
			bindingCheck() {
				this.$refs.bindingDialog.close()
				uni.navigateTo({
					url: '/pages/user/wallet/company-auth'
				})
			},
			payDetail() {
				uni.navigateTo({
					url: '/pages/user/wallet_system/pay_detail'
				})
			},
			fullClick(val) {
				if (val == 1) {
					if (this.ifVerify.data == null || this.ifVerify.data == '') {
						this.tiMesee = '充值业务暂时只对企业账户开放，如需充值， 请选择其他钱包。'
						this.$refs.bindingDialog.open()
					} else if (this.ifVerify.data.status == 1) {
						this.czmess = '已提交申请,审核中'
						this.$refs.ticfPopup.open()
					} else if (this.ifVerify.data.status == 2) {
						uni.navigateTo({
							url: '/pages/user/wallet_system/full'
						})
					} else if (this.ifVerify.data.status == 3) {
						this.tiMesee = '审核未通过，请重新申请'
						this.$refs.bindingDialog.open()
					} else if (this.ifVerify.data.status == 4) {
						this.tiMesee = '审核撤销，请重新申请'
						this.$refs.bindingDialog.open()
					} else {
						this.czmess = this.ifVerify
						this.$refs.ticfPopup.open()
						// this.$refs.bindingDialog.open()

					}

				} else {
					uni.navigateTo({
						url: '/pages/user/wallet/draw-cash'
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 30rpx 40rpx;
	}

	.cont_back {
		margin: 20rpx auto;
		width: 690rpx;
		position: relative;

		.image {
			width: 680rpx;
		}

		.cont_back_mess {
			position: absolute;
			top: 0;
			width: 600rpx;
			left: 5%;
			margin: 10rpx auto;
			text-align: center;
		}

		.mess_balance {
			font-weight: 500;
			font-size: 28rpx;
			line-height: 85rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.yeyimg {
			width: 31rpx;
		}

		.balance_val {
			text-align: center;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 60rpx;

		}

		.bal_btntk {
			display: flex;
			margin: 20rpx auto;
		}

		.btntk {
			width: 198rpx;
			height: 72rpx;
			margin: 10rpx auto;
			border-radius: 36rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			color: #fff;
			font-weight: 400;
		}

	}

	.cont_mess {
		font-weight: 500;
		font-size: 28rpx;
		margin: 20rpx auto;
		width: 690rpx;
		display: flex;
		border-radius: 20rpx;
		padding: 25rpx 25rpx;
		justify-content: space-between;
		align-items: center;


		.mess_list {
			// width: 30%;

			.m-img {
				width: 40rpx;
				height: 38rpx;
			}
		}

		.detail_mess {
			position: relative;
			color: #fff;
			border-radius: 100rpx;
		}

		.detail_mess::after {
			content: "";
			position: absolute;
			bottom: -2rpx;
			left: 0;
			width: 100%;
			height: 8rpx;
			/* 线条的高度 */
			background: linear-gradient(135deg, #5bd680ff 0%, #0bff5c51 50%, #000000 100%);
		}

		.detail_mess2 {
			position: relative;
			color: #000;

		}

		.detail_mess2::after {
			content: "";
			position: absolute;
			bottom: -2rpx;
			left: 0;
			width: 100%;
			height: 8rpx;
			/* 线条的高度 */
			background: linear-gradient(135deg, #AD56D7 0%, #e199ff 50%, #ffffff 100%);
		}

		.rimg {
			width: 28rpx;
			margin-left: 20rpx;

		}


	}

	.type_img {
		width: 74rpx;
		height: 74rpx;
		border-radius: 50%;
		text-align: center;
		line-height: 94rpx;

		.t_img {
			width: 38rpx;
			height: 38rpx;

		}
	}

	.name_detail {
		font-weight: 400;
		font-size: 22rpx;
	}

	.d_mess {
		font-weight: 400;

		font-size: 20rpx;
		margin-top: 6rpx;
	}

	.money {
		font-size: 30rpx;
	}
</style>